<template>
  <div class="qingwu">
    <div class="admin_table_page_title">
      <a-button @click="$router.back()" class="float_right" icon="arrow-left"
        >返回</a-button
      >资源位编辑
    </div>
    <div class="unline underm"></div>
    <div class="admin_form">
      <a-form-model :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
        <a-form-model-item label="所属小区">
          <!--<a-select v-model="info.community_id">
                        <a-select-option v-for="(v,k) in community_list" :key="k" :value="v.community_id">{{v.community_name}}</a-select-option>
                    </a-select>-->
          <a-tree-select
            :replace-fields="{
              children: 'children',
              title: 'community_name',
              key: 'community_id',
              value: 'community_id',
            }"
            v-model="info.community_ids"
            :tree-data="community_list"
            tree-checkable
            :show-checked-strategy="SHOW_PARENT"
          ></a-tree-select>
        </a-form-model-item>

        <a-form-model-item label="名称">
          <a-input v-model="info.name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="广告图">
          <a-upload
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="$api.estateAdvsUploadThumb"
            :data="{ token: $getSession('token_type') }"
            @change="upload"
          >
            <img
              style="max-width: 600px"
              v-if="info.image_url"
              :src="info.image_url"
            />
            <div v-else>
              <a-font v-if="!loading" type="iconplus" />
              <a-icon v-else type="loading" />
            </div>
          </a-upload>
        </a-form-model-item>

        <a-form-model-item label="链接">
          <a-input v-model="info.url"></a-input>
        </a-form-model-item>

        <a-form-model-item label="时间">
          <a-range-picker
            :value="[info.start_time, info.end_time]"
            @change="time_format"
            format="YYYY-MM-DD"
          ></a-range-picker>
        </a-form-model-item>

        <a-form-model-item label="是否启用">
          <a-radio-group
            name="is_show"
            :value="info.is_show"
            @change="showChange"
          >
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  components: {},
  props: {},
  data() {
    return {
      info: {
        is_show: 1,
        start_time: "",
        end_time: "",
      },
      id: 0,
      community_list: [],
      loading: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    moment,
    handleSubmit() {
      // 验证代码处
      if (this.$isEmpty(this.info.name)) {
        return this.$message.error("名称不能为空");
      }
      if (this.$isEmpty(this.info.image_url)) {
        return this.$message.error("请上传图片");
      }
      let api = this.$apiHandle(this.$api.resources, this.id);
      if (api.status) {
        this.$put(api.url, this.info).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            return this.$router.back();
          } else {
            return this.$message.error(res.msg);
          }
        });
      } else {
        this.$post(api.url, this.info).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            return this.$router.back();
          } else {
            return this.$message.error(res.msg);
          }
        });
      }
    },
    get_info() {
      this.$get(this.$api.resources + "/" + this.id).then((res) => {
        res.data.community_ids = [];
        let communityIds = res.data.community_id.split(",");
        communityIds.forEach((item) => {
          res.data.community_ids.push(item);
        });
        this.info = res.data;
      });
    },
    // 获取菜单列表
    onload() {
      // 判断你是否是编辑
      if (!this.$isEmpty(this.$route.params.id)) {
        this.id = this.$route.params.id;
        this.get_info();
      }

      //获取小区列表
      this.$get(this.$api.estateCommunity).then((res) => {
        this.community_list = res.data.data;
      });
    },
    showChange(e) {
      console.log(e.target.value);
      this.info.is_show = e.target.value;
    },

    time_format(val) {
      if (val.length == 0) {
        this.info.start_time = "";
        this.info.end_time = "";
        return false;
      }
      this.info.start_time = moment(val[0]._d).format("YYYY-MM-DD");
      this.info.end_time = moment(val[1]._d).format("YYYY-MM-DD");
      this.$forceUpdate();
    },
    //上传
    upload(e) {
      if (e.file.status == "done") {
        this.loading = false;
        let rs = e.file.response;
        if (rs.code == 200) {
          this.$set(this.info, "image_url", rs.data);
        } else {
          return this.$message.error(rs.msg);
        }
      } else {
        this.loading = true;
      }
    },
  },
  created() {
    this.onload();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.permission_title {
  background: #efefef;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 4px;
}
.cblock {
  margin-top: 10px;
  margin-bottom: 10px;
}
.cbox {
  width: 33%;
  float: left;
}
</style>
